<ion-header>
    <ion-toolbar mode="ios" color="care">
        <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>{{ 'Personal center' | translate }}</ion-title>
    </ion-toolbar>

    <div class="flex-ver-cnt-cnt care-color" padding>
        <ion-thumbnail class="avatar-container" (click)="selectImg()">
            <ion-img [src]="avatarUrl || '/assets/img/iconheadimg.png'"></ion-img>
        </ion-thumbnail>
        <ion-text color="light">
            <h4>{{personName}}</h4>
        </ion-text>
    </div>
</ion-header>
<ion-content>
    <ion-list lines="full">
        <ion-list-header>{{ 'Infos' | translate}}</ion-list-header>

        <ion-item detail (click)="toInfoEdit('name')">
            <ion-text color="danger" slot="start" style='margin-right: 10px'>*</ion-text>
            <ion-label color="care">{{ ['Name', 'Doctor'][userData.type - 2] | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{personName}}</ion-text>
        </ion-item>

        <ion-item lines="full" detail (click)="toInfoEdit('email')">
            <ion-text color="danger" slot="start" style='margin-right: 10px'>*</ion-text>
            <ion-label color="care">{{ 'Email' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{personEmail}}</ion-text>
        </ion-item>

        <ion-item detail (click)="selectGender()" *ngIf="userData.type === 2">
            <ion-text color="danger" slot="start" style='margin-right: 10px'>*</ion-text>
            <ion-label color="care">{{ 'Sex' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{personSex | translate}}</ion-text>
        </ion-item>

        <ion-item detail (click)="toInfoEdit('college')" *ngIf="userData.type === 2">
            <ion-text color="danger" slot="start" style='margin-right: 10px'>*</ion-text>
            <ion-label color="care">{{ 'College' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{personCollege}}</ion-text>
        </ion-item>

        <ion-item detail (click)="selectRegion()">
            <ion-text color="danger" slot="start" style='margin-right: 10px'>*</ion-text>
            <ion-label color="care">{{ 'Region' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{personRegion}}</ion-text>
        </ion-item>

        <ion-item detail (click)="selectDepartment()" *ngIf="userData.type === 2">
            <ion-label>
                <ion-text color="care">
                    <ion-text color="danger" slot="start" style='margin-right: 10px'>*</ion-text>{{ 'Department' | translate }}
                </ion-text>
                <ion-text color="medium">
                    <h3>{{personDepartment}}</h3>
                </ion-text>
            </ion-label>
        </ion-item>

        <ion-item detail (click)="selectHospital()" *ngIf="userData.type === 2">
            <ion-text color="danger" slot="start" style='margin-right: 10px'>*</ion-text>
            <ion-label color="care">{{ 'CooperativeHospitals' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{'Details' | translate}}</ion-text>
        </ion-item>

        <ion-item detail (click)="toInfoEdit('MQ')">
            <ion-text color="danger" slot="start" style='margin-right: 10px'>*</ion-text>
            <ion-label color="care">{{ 'HospitalQualifications' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{'Details' | translate}}</ion-text>
        </ion-item>

        <ion-item detail (click)="toInfoEdit('PH')" *ngIf="userData.type === 2">
            <ion-text color="danger" slot="start" style='margin-right: 10px'>*</ion-text>
            <ion-label color="care">{{ 'PersonalHonors' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{'Details' | translate}}</ion-text>
        </ion-item>

        <ion-item detail (click)="toInfoEdit('PD')" *ngIf="userData.type === 3">
            <ion-text color="danger" slot="start" style='margin-right: 10px'>*</ion-text>
            <ion-label color="care">{{ 'HospitalInfo' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{'Details' | translate}}</ion-text>
        </ion-item>

        <ion-item detail (click)="toInfoEdit('TP')" *ngIf="userData.type === 3">
            <ion-text color="danger" slot="start" style='margin-right: 10px'>*</ion-text>
            <ion-label color="care">{{ 'TestingCost' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{'Details' | translate}}</ion-text>
        </ion-item>

        <!--<ion-item detail (click)="toInfoEdit('TestingCost')" *ngIf="userData.type === 3">
            <ion-text color="danger" slot="start" style='margin-right: 10px'>*</ion-text>
            <ion-label color="care">{{ 'TestingCost' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{userData.order_price}}</ion-text>
        </ion-item>-->

        <ion-item detail *ngIf="userData.type === 3">
            <ion-label color="care">{{ 'BookingCost' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{userData.order_price}}</ion-text>
        </ion-item>

        <ion-item detail (click)="toInfoEdit('PN')">
            <ion-label color="care">{{ 'PhoneNumber' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{personTel}}</ion-text>
        </ion-item>

        <ion-item detail (click)="toInfoEdit('skype')">
            <ion-label color="care">Skype</ion-label>
            <ion-text color="medium" slot="end">{{personSkype}}</ion-text>
        </ion-item>

        <ion-item detail (click)="toInfoEdit('DA')">
            <ion-label>
                <ion-text color="care">
                    {{ 'DetailedAddress' | translate }}
                </ion-text>
                <ion-text color="medium">
                    <h3>{{personDA}}</h3>
                </ion-text>
            </ion-label>
        </ion-item>

        <ion-item detail (click)="selectOrderMode()" *ngIf="userData.type === 2">
            <ion-label color="care">{{ 'ReservationMode' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{personRM | translate}}</ion-text>
        </ion-item>
    </ion-list>
</ion-content>
